<template>
  <a-modal
    :title="processisEdit ? '修改工序' : '添加工序'"
    :visible="show"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :maskClosable="false"
    width="30%"
    class="procedure-modal"
  >
    <div class="title">
      <a-form-model
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
        :model="reviseForm"
        :rules="reviseformRules"
        ref="reviseForm"
      >
        <a-form-model-item label="工序名称" required prop="StdOperationID">
          <a-select
            v-model="StdOperationID"
            style="width: 100%"
            show-search
            :filter-option="filterOption"
            @change="stdoperationFun"
          >
            <a-select-option
              v-for="item in procedureData"
              :value="item.StdOperationID"
              :key="item.StdOperationID"
            >
              {{ item.StdOperationName }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="工序序号" required prop="IndexNo">
          <a-input v-model="reviseForm.IndexNo" />
        </a-form-model-item>
        <a-form-model-item label="工序描述">
          <a-textarea
            style="resize: none"
            v-model="reviseForm.OperationComment"
          />
        </a-form-model-item>
        <a-form-model-item label="操作要点">
          <a-textarea
            style="resize: none"
            v-model="reviseForm.operationPoint"
          />
        </a-form-model-item>
      </a-form-model>
    </div>
  </a-modal>
</template>

<script>
import {
  insRouteoperation,
  updRouteoperation,
} from "@/api/route-operation/index";
export default {
  props: ["show", "processisEdit", "reviseForm", "procedureData"],
  data() {
    return {
      confirmLoading: false, //弹窗loading
      stdOperationInfo: {}, //产品信息
      StdOperationID: "", //选中产品id
      reviseformRules: {
        StdOperationID: [
          { required: true, message: "请选择工序", trigger: "change" },
        ],
        IndexNo: [{ required: true, message: "请填写序号", trigger: "blur" }],
      }, //添加工序名称校验
    };
  },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    handleChange(value) {
      this.reviseForm.StdOperationID = value;
    },
    //关闭弹窗
    handleCancel() {
      this.$refs.reviseForm.clearValidate();
      this.$emit("update:show", false);
    },

    //确认添加/修改
    handleOk() {
      this.$refs.reviseForm.validate(async (valid) => {
        if (valid) {
          this.confirmLoading = true;
          //true为修改 false为新增
          if (this.processisEdit) {
            this.reviseForm.StdOperationID = this.StdOperationID;
            const res = await updRouteoperation([this.reviseForm]);
            if (res.Data == "") {
              this.$message.info("修改成功");
              this.$emit("Updata");
              this.handleCancel();
            } else {
              this.$message.error(res.Data);
            }
            this.confirmLoading = false;
          } else {
            this.reviseForm.StdOperationID = this.StdOperationID;
            const res = await insRouteoperation([this.reviseForm]);
            console.log(res);
            if (res.Data == "") {
              this.$message.info("新增成功");
              this.$emit("Updata");
              this.handleCancel();
            } else {
              this.$message.error(res.Data);
            }
            this.confirmLoading = false;
          }
        }
      });
    },
    //表格选择
    handleTableChange() {},
    //选中的产品
    stdoperationFun(value) {
      this.stdOperationInfo = this.procedureData.find(
        (item) => item.StdOperationID == value
      );
      if (this.stdOperationInfo.StdOperationName) {
        this.reviseForm.StdOperationName =
          this.stdOperationInfo.StdOperationName;
      }
    },
  },
  computed: {
    procedureDataFun: function () {
      return this.procedureData;
    },
  },
  watch: {
    procedureDataFun: function (newValue) {
      //true为修改
      if (this.processisEdit) {
        let { StdOperationID, StdOperationName } = this.reviseForm;
        this.StdOperationID = StdOperationID;
        console.log(this.reviseForm);
        // this.reviseForm.StdOperationID = newValue[0].StdOperationID;
        // this.reviseForm.StdOperationName = newValue[0].StdOperationName;
      } else {
        this.StdOperationID = newValue[0].StdOperationID;
        this.reviseForm.StdOperationID = newValue[0].StdOperationID;
        this.reviseForm.StdOperationName = newValue[0].StdOperationName;
      }
    },
  },
};
</script>

<style lang="less" scoped></style>
